import React, {useState, useMemo, memo, useCallback} from "react";
import {Button, Card} from 'antd';

const CacheError = {
    Parent: () => {
        const [count, setCount] = useState(0)
        /**
         *  大量的运算导致性能消耗 且 如果 handelCilck 通过props 传入子组件  由于每次父组件数据更新 都会重新加载一次
         *  但其实每次计算的值都是一样的 造成性能低下的问题
         *  正确应该只计算第一次  就将结果缓存下来
         * */

        let a = 1
        console.time('time')
        for (let i = 0; i < 1000000000; i++) {
            a += 1
        }
        console.timeEnd('time')

        return (
            <div>
                <div> <span className={'label-red'}>每点一次都会重新运算一次 a 的值</span>  当前a值：{a}</div>
                <Button onClick={()=>setCount(count+1)}>点击count +1 </Button>
            </div>
        )
    }
}

const CacheSuccess ={
    Parent: () => {
        const [count, setCount] = useState(0)
        const [isUpdate,setIsUpdate] =  useState(false)

        /**
         * 只有在依赖项  改变后 才会重新计算
         * */
        let a = useMemo(()=>{
            let a = 1
            console.time('time')
            for (let i = 0; i < 1000000000; i++) {
                a += 1
            }
            console.timeEnd('time')
            return a
        },[isUpdate])


        return (
            <div>
                <div> <span className={'label-red'}>只有在依赖项  改变后 才会重新计算</span>  当前a值：{a}</div>
                <Button onClick={()=>setCount(count+1)}>点击count +1 </Button>
                <Button onClick={()=>setIsUpdate(!isUpdate)}>点击重新计算a值 </Button>
            </div>
        )
    }
}

export default () => {

    return (
        <Card hoverable>
            <div>
                <h1>useMemo的使用:</h1>
                <div>
                    用来 <span className={'definition'}>缓存计算结果</span>，并在后续的渲染中重复利用这些计算结果。
                    useMemo接收两个参数： 一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，useMemo会重新执行传入的函数，并返回新的计算结果。
                </div>
            </div>
            <div className={'module'} style={{marginTop: 10}}>
                <div>问题演示:</div>
                <CacheError.Parent/>
            </div>
            <div className={'module'} style={{marginTop: 10}}>
                <div>使用useMemo:</div>
                <CacheSuccess.Parent/>
            </div>
        </Card>
    )

}